[Grunt]Yeomanで開発ワークフローを楽にしよう[bower]

※2013/5/14 Yoemanってスペルミスしまくってたのを修正

Yeoman(ヨーマン)とは

LESS、Sass、compass、Coffeescript、TypeScript等々、クライアントサイドのWebアプリケーション技術は多様化しています。
Coffee ScriptやLESS等の拡張言語はコンパイルする必要がありますし、jsファイルはconcat/最適化/ミニファイすることも多いです。
ソースを修正するたびにいちいち手動でコンパイルしたり最適化するのは、本来注力すべき事象ではありません。
Yeomanは開発者がアプリケーション開発に注力できるよう、アプリのひな形生成からテストやコンパイル、ファイル最適化といったワークフローを提供してくれます。 Yeomanについてはここでも少しふれていますが、開発を楽に楽しくするためのツールが満載のようですね。
まずはYoemonについての概要を確認しましょう。

Yeomanの機能

さて、「Yeomanが開発のためのワークフローを提供」といいましたが、具体的にはどんな機能を持っているか見てみましょう。
Yeomanは次の３つのツールから構成されています。

1.Yo
Yeomanを使用してアプリケーションのひな形を作成する、scaffoldingを提供するツールです。
このツールを使用すると、指定に応じたアプリのディレクトリ構成が生成され、さらに必要なGruntfileやbowerの設定ファイルも生成されます。

Yoは「ジェネレータ」という仕組みを使用して、アプリのひな形を生成します。
ジェネレータには普通のWebアプリ用、Backbone用、node.jsのExpress用など、使用する用途/フレームワークに応じていろいろな種類があります。
npmで検索すると、Yeoman用genetatorが複数見つかります。

% npm search yeoman-generator
//以下、Yeoman用ジェネレータが表示される
・
・

2.Grunt
弊社ブログでも何度か紹介している、Javascript/Coffee Scriptで記述可能なビルドツールです。
コンパイル・ミニファイ・ビルド・テスト・デプロイ等、さまざまなタスクを実行するための使用されます。

3.bower
ここで紹介したことがある、クライアントライブラリ管理用ツールです。
jqueryやunderscoreなど、クライアントサイドのライブラリを手軽に管理できます。

Gruntもbowerも、それぞれ単独で開発されているツールです。Yeomanはこれらのツールと協調して動作するようになっています。
ではYeomanのインストールから実際に試してみましょう。

環境構築方法

今回使用した動作環境は以下のとおりです。

• OS : MacOS X 10.7.5
• Node.js : v0.10.4
• npm : 1.2.18
• ruby : 1.8.7

Yeomanのインストールと動作確認

では、Yeomanおよびそれに必要なモジュールインストールしていきましょう。
まずはここでお馴染みのcompassをインストールします。

% sudo gem install compass

次に、npmを使用してyo、bower、gruntをグローバルオプションでインストールします。

% npm install -g  bower grunt-cli yo

サンプルアプリ用ディレクトリを作成し、yoコマンドでアプリのひな形を自動生成します。
ジェネレータは、デフォルトで用意されているwebappジェネレータを使用しましょう。
なお、途中でbootstrapやrequire.jsを使うかどうか聞かれます。どちらもYesを選択します。

% mkdir yoSample
% cd yoSample
% yo webapp

     _-----_
    |       |
    |--(o)--|   .--------------------------.
   `---------´  |    Welcome to Yeoman,    |
    ( _´U`_ )   |   ladies and gentlemen!  |
    /___A___\   '__________________________'
     |  ~  |
   __'.___.'__
 ´   `  |° ´ Y `

Out of the box I include HTML5 Boilerplate, jQuery and Modernizr.
Would you like to include Twitter Bootstrap for Sass? (Y/n) Y
Would you like to include RequireJS (for AMD support)? (Y/n) Y
   create Gruntfile.js
   create package.json
   ・
   ・

アプリのひな形を生成したら、package.json、component.jsonに記述されたモジュールをインストールします。
これで準備が完了です。

% npm install 
% bower install

生成されたGruntfile.jsonをみてみると、すでに多数のタスクが登録され、動作する状態になっています。
では、serverタスクを実行して、アプリを起動してみましょう。

% grunt server
Running "server" task

Running "clean:server" (clean) task
Cleaning ".tmp"...OK

Running "concurrent:server" (concurrent) task

    Running "coffee:dist" (coffee) task
    File .tmp/scripts/hello.js created.

    Done, without errors.

    Running "compass:server" (compass) task
    directory .tmp/styles/
       create .tmp/styles/main.css

    Done, without errors.

Running "livereload-start" task
... Starting Livereload server on 35729 ...

Running "connect:livereload" (connect) task
Starting connect web server on localhost:9000.

Running "open:server" (open) task

Running "watch" task
Watching app/scripts/{,*/}*.coffee
Watching test/spec/{,*/}*.coffee
Watching app/styles/{,*/}*.{scss,sass}
Watching app/*.html,{.tmp,app}/styles/{,*/}*.css,{.tmp,app}/scripts/{,*/}*.js,app/images/{,*/}*.{png,jpg,jpeg,gif,webp,svg}

cleanやコンパイル、アプリ起動され、ブラウザでサンプルアプリの画面が開きます。
さらにhtmlやjsはwatch対象になっているので、この状態でファイルを修正すればそのまま変更が反映されます。

また、次のように「grunt test」とすれば、mochaのテストを実行することもできます。

% grunt test
Running "clean:server" (clean) task
Cleaning ".tmp"...OK

Running "concurrent:test" (concurrent) task

    Running "coffee:dist" (coffee) task
    File .tmp/scripts/hello.js created.

    Running "coffee:test" (coffee) task

    Done, without errors.

    Running "compass:dist" (compass) task
    directory .tmp/styles/
       create .tmp/styles/main.css

    Running "compass:server" (compass) task
    unchanged app/styles/main.scss

    Done, without errors.

Running "connect:test" (connect) task
Starting connect web server on localhost:9000.

Running "mocha:all" (mocha) task
Testing: http://localhost:9000/index.html

  1 test complete (117 ms)

Done, without errors.

まとめ

今回はYeomanの基本的な動作を確認してみました。
簡単にアプリのひな形が作成でき、Gruntタスクもあらかじめ用意されているので、環境周りの設定を０からつくる手間が省けます。
デフォルトのwebappを修正したり、要件に合うgeneratorをインストールしたりして、開発のためのワークフローをどんどん便利にしていきましょう。

参考サイトなど

• Yeoman公式: http://yeoman.io/index.html